<template>
  <div class="content">
    <el-backtop :visibility-height="100" :bottom="60" />
    <el-card class="bottom10">
      <el-button type="primary" size="mini" plain>全部申请（{{ total }}）</el-button>
      <el-button type="success" size="mini" plain>审核中（{{state1}}）</el-button>
      <el-button type="warning" size="mini" plain>已退款（{{ state2 }}）</el-button>
      <el-button type="info" size="mini" plain>已取消（{{ state3 }}）</el-button>
      <el-button type="danger" size="mini" plain>退款审核未通过（{{ state4 }}）</el-button>
      <el-collapse v-model="activeNames" style="margin-top:10px">
        <el-collapse-item name="1">
          <template slot="title">
            <span style="font-size:18px;">筛选查询</span>
          </template>
          <el-form ref="form" :model="form" label-width="100px">
            <div class="search-class">
              <el-form-item label="输入搜索：">
                <el-input v-model="form.id" placeholder="订单号/商品货号" />
              </el-form-item>
              <el-form-item label="收货人：">
                <el-input v-model="form.name" placeholder="姓名/手机号" />
              </el-form-item>
              <el-form-item label="申请时间：">
                <el-date-picker v-model="form.createdate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"> </el-date-picker>
              </el-form-item>
              <el-form-item label="">
                <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-collapse-item>
      </el-collapse>
      <el-row class="flex-hs tabTop">
        <el-col :span="24">
          <!-- <div class="flex-hs">
            <download-excel style="margin-right: 10px;" :data="json_data" :fields="json_fields" name="导出订单.xls">
              <el-button type="primary">导出数据</el-button>
            </download-excel>
            <el-button type="danger" :disabled="multipleSelection.length === 0" @click="deleteItem(1)">删除</el-button>
          </div> -->
        </el-col>
      </el-row>
      <el-row class="flex-hs">
        <el-table :data="tableData" border style="width: 100%;margin:20px 0" @selection-change="handleSelectionChange">
          <el-table-column type="selection" label="" width="50" />
          <el-table-column prop="id" label="服务单号" width="100" />
          <el-table-column prop="createdate" label="申请时间" width="160" />
          <el-table-column prop="openid" label="用户账号"  min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column prop="phone" label="联系方式" />
          <el-table-column prop="total_price" label="退款金额" width="100"/>
          <el-table-column prop="name" label="联系人"/>
          <el-table-column prop="reason" label="申请原因" :show-overflow-tooltip="true"/>
          <el-table-column label="申请状态" width="130">
            <template slot-scope="scope">
              <el-tag :type="{ 1: 'primary', 2: 'danger', 3: 'info', 4: 'warning' }[scope.row.state]">{{ refundState[scope.row.state] }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="updatedate" label="处理时间" width="160">
            <template slot-scope="scope">
             {{scope.row.updatedate=='0000-00-00 00:00:00'?'':scope.row.updatedate}}
            </template>
          </el-table-column>
          <el-table-column prop="no_pass_reason" label="处理结果" :show-overflow-tooltip="true"/>
          <el-table-column label="操作" width="60">
            <template slot-scope="scope">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link"> 
                  <i class="el-icon-more-outline" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="whatIclick('look', scope.row)">查看</el-dropdown-item>
                  <el-dropdown-item :command="whatIclick('yes', scope.row)" :disabled="scope.row.state!=1">同意退款</el-dropdown-item>
                  <el-dropdown-item :command="whatIclick('no', scope.row)" :disabled="scope.row.state!=1">拒绝退款</el-dropdown-item>
                  <!-- <el-dropdown-item :command="whatIclick('delete', scope.row)">删除</el-dropdown-item> -->
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row class="flex-he">
        <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-row>
    </el-card>
    <look-info v-if="openLookInfo" ref="lookInfo" />
  </div>
</template>

<script>
import {mapState} from 'vuex'
import lookInfo from './lookInfo'
export default {
  components: {
    lookInfo
  },
  data() {
    return {
      activeNames: ['1'],
      currentPage: 1,
      pageSize: 20,
      total: 100,
      orderNumlist:[],
      state1:'',
      state2:'',
      state3:'',
      state4:'',
      form: {
        id:'',
        name: '',
        createdate: ''
      },
      openLookInfo: false,
      multipleSelection: [],
      tableData: [],
      json_fields: {
        '头部-诊断名称': 'name', //常规字段
        '头部-联系电话': 'phone.mobile', //支持嵌套属性
        '头部-损坏区域代码': {
          field: 'phone.landline',
          //自定义回调函数
          callback: value => {
            return `损坏区域代码 - ${value}`
          }
        }
      },
      json_data: [
        {
          name: '损坏的组件一',
          city: 'New York',
          country: 'United States',
          birthdate: '1978-03-15',
          phone: {
            mobile: '1-541-754-3010',
            landline: '(541) 754-3010'
          }
        },
        {
          name: '损坏的组件二',
          city: 'Athens',
          country: 'Greece',
          birthdate: '1987-11-23',
          phone: {
            mobile: '+1 855 275 5071',
            landline: '(2741) 2621-244'
          }
        }
      ]
    }
  },
  computed: {
    ...mapState(['refundState']),
    queryData() {
      let obj = this.form
      obj.count = this.pageSize
      obj.page = this.currentPage
      return obj
    }
  },
  mounted() {
    this.search()
    this.getNumbers()
  },
  methods: {
    orderNum(val){
      let aa = this.orderNumlist.filter(e=>e.state == val)
      if(aa.length>0){
        return aa[0].num
      }else{
        return 0
      }
    },
    getNumbers(){
      this.$http.httpPost('/index/stateNum',{table:'refund_reason'}).then(res => {
        console.log(res,456);
        this.orderNumlist = res.data.data
        this.state1 = this.orderNum(1)
        this.state2 =this.orderNum(2)
        this.state3 = this.orderNum(3)
        this.state4 = this.orderNum(4)
      })
    },
    search() {
      console.log(this.queryData, 123)
      this.$http.httpPost('/refundReason/refundList ', this.queryData).then(res=>{
        if (res.data.code == 0) {
          this.total = res.data.data.total
          this.tableData = res.data.data.data
        }
      })
      
    },
    outOrder(val) {},
    whatIclick(type, data) {
      return {
        type,
        data
      }
    },
    deleteItem(val) {
      const idarr = []
      if (val === 1) {
        this.multipleSelection.forEach(e => {
          idarr.push(e.id)
        })
      } else {
        idarr.push(val.id)
      }
      const ids = idarr.join()
      this.$confirm('此操作将删除该项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let res = this.$http.httpPost('/brand/delBrand', { ids: ids })
          if (res) {
            this.$operateTip('已完成！', '已完成数据删除！', 'success')
          }
          this.search()
        })
        .catch(() => {
          this.$operateTip('已取消！', '已取消数据删除！', 'info')
        })
    },
    handleCommand(e) {
      if (e.type === 'look') {
        this.openLookInfo = true
        this.$nextTick(() => {
          this.$refs.lookInfo.init(e.data)
        })
      } else if (e.type === 'yes') {
        this.openDo(e.data.id)
      } else if (e.type === 'no') {
        this.openDo2(e.data.id)
      } else if (e.type === 'delete') {
        this.deleteItem(e.data)
      }
    },
    doRefund(obj){
      this.$http.httpPost('/refundReason/save/', obj).then(res=>{
      if (res.data.code == 0) {
        this.$message({
            type: 'info',
            message: '已同意退款申请！'
          })
        this.search()
      }
    })
    },
    openDo(id) {
      this.$prompt('同意退款备注', '输入备注', {
        inputType:'textarea',
        distinguishCancelAndClose:true,
        confirmButtonText: '确定退款',
        cancelButtonText: '取消',
        inputPattern: /^[\u4e00-\u9fffa-zA-Z0-9]{2,100}$/,
        inputErrorMessage: '必须填写处理备注,100字以内！'
      })
        .then(({ value }) => {
          let obj = {
            no_pass_reason:value,
            id:id,
            state:2,
          }
          this.doRefund(obj)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消处理退款申请！'
          })
        })
    },
    openDo2(id) {
      this.$prompt('拒绝退款备注', '输入原因', {
        inputType:'textarea',
        distinguishCancelAndClose:true,
        confirmButtonText: '拒绝退款',
        cancelButtonText: '取消',
        inputPattern: /^[\u4e00-\u9fffa-zA-Z0-9]{2,100}$/,
        inputErrorMessage: '必须填写拒绝退款原因,100字以内！'
      })
        .then(({ value }) => {
          let obj = {
            no_pass_reason:value,
            id:id,
            state:4,
          }
          this.doRefund(obj)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消处理退款申请！'
          })
        })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.search()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.search()
    },
    // 列表多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style lang="less"></style>
